<template>
  <div class="line-chart">
    <div class="title">近30天按揭次数走势</div>
    <div class="myChart-box">
      <div id="myChart" v-if="xData != []"></div>
    </div>
  </div>
</template>

<script>
import { getMortgageSta2 } from '../../views/find/api'
// echarts相关
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')
require('echarts/lib/component/markLine')
require('echarts/lib/component/markPoint')

import { GridComponent } from 'echarts/components'
echarts.use([GridComponent])

export default {
  data() {
    return {
      xData: [],
      yData: []
    }
  },
  mounted() {
  },
  methods: {
    drawLine() {
      // console.log('line',this.xData)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      var option;
      option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '按揭次数',
            type: 'line',
            data: this.yData,
            color: [
              "#FF9842"
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    async getData() {
      let startTime = '2021-10-1' // 暂时用不到
      var now = new Date()
      let endTime = now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate() // 可以拿到这一天为止的前30天的数据
      const { data } = await getMortgageSta2(startTime,endTime)
      this.xData = data.map(item => {
        return item.days
      })
      this.yData = data.map(item => {
        return item.num
      })
      // console.log(this.xData, this.yData)
      this.drawLine()

    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.line-chart {
  background-color: white;
  padding-top: 20px;
}
.title{
  font-size: 16px;
  padding-left: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
}
.myChart-box{
  overflow:scroll;
}
 #myChart {
   /* padding-left: 5px; */
   height: 300px;
   width: 100vh;
 }
</style>